<template>
  <!-- <div>
    <el-input v-model="form[attr.prop]"></el-input>
  </div> -->
  <el-select-v2
    clearable
    v-model="data.form[data.attr.prop]"
    filterable
    :remote="data.attr.searchName ? true : false"
    v-bind="data.attr"
    :remote-method="(query) => getList(query)"
    :options="data.options ?? []"
    type="default"
    class="common-select"
    @change="changeValue"
    @clear="getList"
  >
  </el-select-v2>
  <!-- <el-select filterable clearable v-model="data.form[data.attr.prop]" @change="changeValue" v-bind="data.attr" type="default" class="common-select">
    <el-option
      v-for="item in data.options"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option>
  </el-select> -->
</template>
<script lang="ts">
import { defineComponent, reactive, toRefs, onMounted, watch, nextTick, ref } from 'vue'
import { initState } from './index'
export default defineComponent({
  name: 'Region',
  setup(props, ctx) {
    const attrs: any = ctx.attrs
    const state: any = reactive({
      data: {
        attr: {},
        form: {},
        fn: {},
        serverOptions: {},
        options: []
      }
    })
    onMounted(() => {
      // state.attr = attrs.attr
      // state.serverOptions = attrs.serverOption
      // state.form = attrs.form
      state.data = initState(attrs)
      // console.log(attrs)
    })
    const getList = async (query = '') => {
      if (state.data.serverOptions && state.data.serverOptions.data) return

      // console.log('list')
      const serverOptions: any = state.data.serverOptions
      const req = serverOptions.req || {}
      // const form = {...state.data.form}
      // form[state.data.attr.prop] = ''
      if (req.size) req.size = 1500
      let obj = Object.assign({}, state.data.form, { checkAll: true, size: 1000 }, req)
      if (state.data.attr.searchName) {
        obj = Object.assign({}, obj, {
          [state.data.attr.searchName]: query,
          [state.data.attr.prop]: ''
        })
      }
      const res = await serverOptions?.list(obj)
      let data: any[] = []
      if (req.size) {
        data = res.data.records
      } else {
        data = res.data
      }
      state.data.options = data.map((v) => {
        const obj: any = {}
        let label
        let value
        if (serverOptions.label) {
          label = v[serverOptions.label]
            ? `${v[serverOptions.label]}(${v[serverOptions.value]})`
            : ''
        } else {
          label = v
        }
        value = serverOptions.value ? v[serverOptions.value] : v
        obj.label = label
        obj.value = value
        return obj
      })
      //返回接口的数据
      if (state.data.fn && state.data.fn.getCallData) {
        state.data.fn.getCallData(state.data.options)
      }

      // console.log(state.data.options, 'options')
    }
    watch(
      () => state.data.serverOptions,
      (val) => {
        if (state.data.serverOptions && state.data.serverOptions.data) {
          state.data.options = state.data.serverOptions.data
        } else {
          // console.log(state.data.serverOptions);
          ;(state.data.serverOptions as any).list && getList()
        }
      },
      {
        deep: true
      }
    )
    nextTick(() => {
      if (attrs.attr.deep && attrs.attr.deep.length > 0) {
        if (Array.isArray(attrs.attr.deep)) {
          attrs.attr.deep.forEach((v) => {
            watch(
              () => attrs.formItem[v],
              (val) => {
                state.data.form[state.data.attr.prop] = undefined
                if (attrs.attr.propNm) {
                  state.data.form[state.data.attr.propNm] = ''
                }
                ;(state.data.serverOptions as any).list && getList()
                // console.log(val, state.data.attr.deep)
              },
              {
                deep: true
              }
            )
          })
        }
      }
    })
    const changeValue = (val) => {
      // console.log(val)
      if (attrs.attr.propNm) {
        state.data.form[state.data.attr.propNm] = state.data.options?.filter(
          (v) => v.value == val
        )[0]?.label
      }
    }
    return {
      changeValue,
      getList,
      ...toRefs(state)
    }
  }
})
</script>
<style lang="scss" scoped>
:deep(.el-select-dropdown__list) {
  min-width: 150px;
}
.common-select {
  width: 100% !important;
}
</style>
